<template>
	<div>
		<el-row class="top">
			<el-col :span="24">
				<el-form :inline="true" :model="state.queryFrom">
					<el-form-item label="产品名称：">
						<el-input v-model="state.queryFrom.name" placeholder="产品名称" clearable/>
					</el-form-item>
					<!--          <el-form-item label="产品类型：">-->
					<!--            <el-input v-model="state.queryFrom.type" placeholder="产品类型" clearable/>-->
					<!--          </el-form-item>-->
					<el-form-item>
						<el-button type="primary" @click="queryBtn">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-tabs v-model="state.activeName" @tab-change="handleClick">
					<el-tab-pane v-for="item in state.tabPaneList" :label="item" :name="item">
						<el-table :data="state.tableData" border style="width: 100%">
							<el-table-column type="expand">
								<template #default="props">
									<div style="margin-left: 10px">
										<el-descriptions title="" border>
											<el-descriptions-item label="产品标题">{{ props.row.productTitle }}
											</el-descriptions-item>

											<el-descriptions-item label="产品标签">
												<el-tag size="small">{{ props.row.productTag }}</el-tag>
											</el-descriptions-item>
											<el-descriptions-item label="点赞数">{{ props.row.praiseNum }}
											</el-descriptions-item>
											<el-descriptions-item label="下载数">{{ props.row.downNum }}
											</el-descriptions-item>
										</el-descriptions>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="productId" label="产品编号"  align="center"/>
							<el-table-column prop="productName" label="产品名称"  align="center"/>
							<el-table-column prop="productImg" label="封面图"  align="center">
								<template #default="props">
									<el-image

										:src="props.row.productImg"
										:zoom-rate="1.2"
										:max-scale="7"
										:min-scale="0.2"
										:preview-src-list="[props.row.productImg]"
										:preview-teleported="true"
										fit="fill"
									/>
								</template>
							</el-table-column>
							<el-table-column prop="productDesc" label="商品描述" align="center">
								<template #default="props">
									<el-link type="primary" @click="info(props.row.productDesc)">点击</el-link>
								</template>
							</el-table-column>
							<el-table-column label="用户信息">
								<template #default="props">
									<el-link type="primary" @click="userInfo(props.row.adminCusUser)">点击</el-link>
								</template>
							</el-table-column>
							<el-table-column prop="auditStatus" label="审核状态" align="center">
								<template #default="props">
									<el-tag :type="getTagType(props.row.auditStatus)">
										{{ getAuditStatusText(props.row.auditStatus) }}
									</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="详情操作" align="center">
								<template #default="props">
									<el-button  link type="primary" size="small" @click="to(props.row.productId)">审核</el-button>
<!--									<el-button v-if="props.row.status === 1" link type="primary" size="small" @click="completion(props.row)">修改内容</el-button>-->

								</template>
							</el-table-column>
						</el-table>
						<div class="pagination-container">
							<el-pagination
								:page-size="state.pageValidate.pageSize"
								layout="prev, pager, next"
								:total="state.total"
								@current-change="handleCurrentChange"
							/>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-col>
		</el-row>
		<el-dialog
			v-model="state.infoDialogVisible"
			title="商品详情"
			width="50%"
			:before-close="handleClose"
		>
			<div v-html="state.infoDesc"></div>

		</el-dialog>
		<el-dialog v-model="state.userInfoDialogVisible"
							 title="用户信息"
							 width="800">
			<el-descriptions :title="state.userInfo.nickName">
				<el-descriptions-item label="用户编号">{{ state.userInfo.id }}</el-descriptions-item>
				<el-descriptions-item label="手机号">{{ state.userInfo.cellPhone }}</el-descriptions-item>
				<el-descriptions-item label="角色">
					<el-tag size="small"> {{ state.userInfo.isAccredit === 1 ? '授权商' : '普通用户' }}</el-tag>
				</el-descriptions-item>
			</el-descriptions>
		</el-dialog>
	</div>
</template>
<script setup lang="ts">

import type {TabPaneName} from 'element-plus';

import {useRouter} from 'vue-router';
import {postRequest} from "~/composables/http";

const router = useRouter();
const state = reactive(<any>{
	userInfo: {},
	userInfoDialogVisible: false,
	pageValidate: {
		pageNo: 1,
		pageSize: 8
	},
	total: 10,
	categorys: '',
	infoDesc: '',
	infoDialogVisible: false,
	activeName: '审核通过',
	tabPaneList: ['审核通过', '未审核', '审核拒绝'],
	queryFrom: {
		name: '',
		type: '',
		//审核状态：0(待审核), 1(审核通过), 2(审核拒绝)
		audit: 1,
		productType:1
	},
	tableData: [],

});

/**
 * 初始化
 */
function init() {
	postRequest('/api/admin/product/searchProductAdmin', {
		pageValidate: {pageValidate: state.pageValidate},
		params: state.queryFrom
	}).then((res: any) => {
		state.tableData = res.data.lists;
		state.total = res.data.count;
		state.pageValidate.pageSize = res.data.pageSize;
		state.pageValidate.pageNo = res.data.pageNo;
	});
}

/**
 * 详情页跳转
 * @param id
 */
function to(id: any) {
	router.push(`/audit/${id}`)
}
function queryBtn() {
	init();
}

const handleCurrentChange = (val: number) => {
	state.pageValidate.pageNo = val;
	init();
};

init();

function info(data: string) {
	state.infoDialogVisible = true;
	state.infoDesc = data;
}

function handleClose() {
	state.infoDesc = '';
	state.infoDialogVisible = false;
}

/**
 * 审核
 */
function audit(data: any) {
	router.push({name: 'auditInfo', params: {productId: data.productId}});
}

//标签页点击
const handleClick = (name: TabPaneName) => {
	if (name === '未审核') {
		state.queryFrom.audit = 0;
		init();
	} else if (name === '审核拒绝') {
		state.queryFrom.audit = 2;
		init();
	} else if (name === '审核通过') {
		state.queryFrom.audit = 1;
		init();
	}
};


/**
 * 用户信息
 * @param data
 */
function userInfo(data: any) {
	state.userInfo = data;
	state.userInfoDialogVisible = true;
}

/**
 * 审核函数 start
 * @param status
 */
function getTagType(status: any) {
	switch (status) {
		case 0:
			return 'info'; // 待审核
		case 1:
			return 'success'; // 审核通过
		case 2:
			return 'danger'; // 审核拒绝
		default:
			return 'default';
	}
}

function getAuditStatusText(status: any) {
	switch (status) {
		case 0:
			return '待审核';
		case 1:
			return '审核通过';
		case 2:
			return '审核拒绝';
		default:
			return '未知状态';
	}
}

/**
 * 审核函数 end
 */

</script>
<style scoped>
.top {
	margin-bottom: 10px;
}

.pagination-container {
	display: flex;
	justify-content: center;
	margin-top: 20px; /* 可根据需要调整外边距 */
}
</style>
